<template>
    <u-popup :show="show" @close="show = false" mode="bottom" :round="10">
        <view @touchmove.prevent.stop class="popup-common">
            <view class="title">请选择地区</view>
            <view class="flex p-[30rpx] pt-[0] text-sm font-500">
                <view v-if="areaList.province.length && level >= 1" class="flex-1 pr-[10rpx]" :class="{'text-[var(--primary-color)]': currSelect == 'province'}" @click="currSelect = 'province'">
                    <view v-if="selected.province">{{ selected.province.name }}</view>
                    <view v-else>请选择</view>
                </view>
                <view v-if="areaList.city.length && level >= 2" class="flex-1 pr-[10rpx]" :class="{'text-[var(--primary-color)]': currSelect == 'city' }" @click="currSelect = 'city'">
                    <view v-if="selected.city">{{ selected.city.name }}</view>
                    <view v-else>请选择</view>
                </view>
                <view v-if="areaList.district.length && level >= 3" class="flex-1 pr-[10rpx]" :class="{'text-[var(--primary-color)]': currSelect == 'district' }" @click="currSelect = 'district'">
                    <view v-if="selected.district">{{ selected.district.name }}</view>
                    <view v-else>请选择</view>
                </view>
            </view>
            <scroll-view scroll-y="true" class="h-[50vh]">
                <view class="flex p-[30rpx] pt-0 text-sm">
                    <view v-if="areaList.province.length && level >= 1" v-show="currSelect == 'province'">
                        <view v-for="item in areaList.province" class="h-[80rpx] flex items-center" :class="{'text-[var(--primary-color)]': selected.province && selected.province.id == item.id }" @click="selected.province = item">{{ item.name }}</view>
                    </view>
                    <view v-if="areaList.city.length && level >= 2" v-show="currSelect == 'city'">
                        <view v-for="item in areaList.city" class="h-[80rpx] flex items-center" :class="{'text-[var(--primary-color)]': selected.city && selected.city.id == item.id }" @click="selected.city = item">{{ item.name }}</view>
                    </view>
                    <view v-if="areaList.district.length && level >= 3" v-show="currSelect == 'district'">
                        <view v-for="item in areaList.district" class="h-[80rpx] flex items-center " :class="{'text-[var(--primary-color)]': selected.district && selected.district.id == item.id }" @click="selected.district = item">{{ item.name }}</view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </u-popup>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { getAreaListByPid, getAreaByCode } from '@/app/api/system'

const prop = defineProps({
    areaId: {
        type: Number,
        default: 0
    },
    level: {
        type: Number,
        default: 3 // 1: 省 2: 市 3: 区县
    }
})

const show = ref(false)
const areaList = reactive<any>({
    province: [],
    city: [],
    district: []
})
const currSelect = ref('province')

// 根据level确定初始选择项
const getInitialSelect = () => {
    if (prop.level >= 1) return 'province'
    return 'province'
}

const selected = reactive<any>({
    province: null,
    city: null,
    district: null
})

getAreaListByPid(0).then(({ data }: any) => {
    areaList.province = data
}).catch()

watch(() => prop.areaId, (nval, oval) => {
    if (nval && !oval) {
        getAreaByCode(nval).then(({ data }: any) => {
            data.province && (selected.province = data.province)
            data.city && (selected.city = data.city)
            data.district && (selected.district = data.district)
			if (data.city == undefined && data.province && data.district) {
			    selected.city = data.district
				selected.district=null
			}
        })
    }
}, {
    immediate: true
})

/**
 * 监听省变更
 */
watch(() => selected.province, () => {
    if (prop.level >= 2) {
        getAreaListByPid(selected.province.id).then(({ data }: any) => {
            areaList.city = data
            currSelect.value = 'city'
            
            if (selected.city) {
                let isExist = false
                for (let i = 0; i < data.length; i++) {
                    if (selected.city.id == data[i].id) {
                        isExist = true
                        break
                    }
                }
                if (!isExist) {
                    selected.city = null
                }
            }
        }).catch()
    } else if (prop.level === 1) {
        // 如果level为1，选择省后直接完成
        emits('complete', selected)
        show.value = false
    }
}, { deep: true })

/**
 * 监听市变更
 */
watch(() => selected.city, (nval) => {
    if (nval) {
        if (prop.level >= 3) {
            getAreaListByPid(selected.city.id).then(({ data }: any) => {
                areaList.district = data
                currSelect.value = 'district'

                if (selected.district) {
                    let isExist = false
                    for (let i = 0; i < data.length; i++) {
                        if (selected.district.id == data[i].id) {
                            isExist = true
                            break
                        }
                    }
                    if (!isExist) {
                        selected.district = null
                    }
                }
                if (!data.length) {
                    emits('complete', selected)
                    show.value = false
                }
            }).catch()
        } else if (prop.level === 2) {
            // 如果level为2，选择市后直接完成
            emits('complete', selected)
            show.value = false
        }
    } else {
        areaList.district = []
        selected.district = null
    }
}, { deep: true })

const emits = defineEmits(['complete'])

/**
 * 监听区县变更
 */
watch(() => selected.district, (nval) => {
    if (nval && prop.level >= 3) {
        currSelect.value = 'district'
        emits('complete', selected)
        show.value = false
    }
}, { deep: true })

const open = () => {
    show.value = true
    currSelect.value = getInitialSelect()
}

defineExpose({
    open
})
</script>

<style lang="scss" scoped></style>
